<template>
  <div class="test">
    <div class="container">
      <header class="clearfix">
        <h1>用户管理</h1>
        <button
          type="success"
          class="btn btn-default pull-right"
          @click="handleClose"
        >
          添加用户
        </button>
      </header>

      <table class="my-tabble table table-hover table-bordered">
        <thead>
          <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>ctime</th>
            <th>setting</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="item in userList"
            :key="item.id"
          >
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.ctime }}</td>
            <td>
              <button
                type="button"
                class="btn btn-info"
                @click="handleClose(item.id)"
              >
                编辑
              </button>

              <button
                type="button"
                class="btn btn-danger"
                @click="deleteUsers(item.id)"
              >
                删除
              </button>
            </td>
          </tr>
          <tr v-if="userList.length === 0">
            <td colspan="5">暂无数据</td>
          </tr>
        </tbody>
      </table>

      <div
        class="mask"
        v-if="isShow"
      >
        <form class="addForm">
          <header>
            <legend>
              <span>{{ title }}</span
              >用户信息
            </legend>
            <span
              class="closed"
              @click="isShow = !isShow"
              >x</span
            >
          </header>
          <div class="form-group">
            <label for="name">用户名</label>
            <input
              v-model="model.name"
              type="text"
              class="form-control"
              id="name"
              placeholder="请输入用户名"
            />
          </div>
          <div class="form-group">
            <label for="age">年龄</label>
            <input
              v-model="model.age"
              type="text"
              class="form-control"
              id="name"
              placeholder="请输入年龄"
            />
          </div>
          <button
            type="button"
            class="btn btn-primary"
            @click="saveUsers"
          >
            保存
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getUsers,
  getUsersById,
  addUsers,
  editUsers,
  deleteUsers
} from '@/api/users.js'
export default {
  data() {
    return {
      isShow: false,
      title: '添加',
      model: {
        name: '',
        age: ''
      },
      userList: [
        {
          id: 0,
          name: 'fly',
          age: 18,
          ctime: Date.now(),
          isShow: true
        },
        {
          id: 1,
          name: '柱子',
          age: 18,
          ctime: Date.now(),
          isShow: true
        },
        {
          id: 2,
          name: '邱邱',
          age: 18,
          ctime: Date.now(),
          isShow: true
        }
      ]
    }
  },
  // 页面一开启立即执行
  created() {
    this.getUsers()
  },
  methods: {
    async getUsers() {
      const res = await getUsers()
      // 后台一般不会给我们传递显示隐藏的布尔值，这个时候自己遍历添加即可
      res.forEach((item) => {
        item.isShow = true
      })
      // console.log(res)
      this.userList = res

      console.log(this.userList)
    },
    async saveUsers() {
      // 编辑
      if (this.model.isEdit) {
        await editUsers(this.model, this.model.id)
        this.getUsers()
        this.isShow = !this.isShow
      } else {
        // 添加
        this.title = '添加'
        this.model.id = Date.now()
        this.model.ctime = Date.now()
        // 发起添加操作
        await addUsers(this.model)
        this.getUsers()
        this.isShow = !this.isShow
      }
    },
    async deleteUsers(id) {
      // this.userList.splice(index, 1)
      await deleteUsers(id)
      this.getUsers()
    },
    async handleClose(id) {
      this.isShow = !this.isShow
      if (typeof id === 'number') {
        this.title = '编辑'
        const res = await getUsersById(id)
        this.model = res
        // 动态添加了编辑的属性方便后期判断用于区分编辑和添加
        this.model.isEdit = true
      } else {
        this.title = '添加'
        this.model = {}
      }
    }
  }
}
</script>
<style lang="scss">
@import url('../../../node_modules/bootstrap/dist/css/bootstrap.css');
.my-tabble {
  margin-top: 20px;
}

.mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  .addForm {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 300px;
    background-color: #fff;
    padding: 10px;
    header {
      display: flex;
      justify-content: space-between;
      .closed {
        font-size: 20px;
      }
    }
  }
}
</style>
